<template>
    <div>
        <el-dialog title="编辑人员" :visible.sync="dialogVisible" width='450px' append-to-body v-dialogDrag :close-on-click-modal="false" >
            <div>
                <el-form ref="rowdata" :model="rowdata" label-width="100px" class="personeditform" :rules="rules" status-icon>
                    <el-form-item label="真实姓名" prop="truename">
                        <el-input v-model="rowdata.truename" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-select v-model="rowdata.sex" >
                            <el-option label="男" value="男"></el-option>
                            <el-option label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出生日期" prop="birthday">
                        <el-date-picker v-model="rowdata.birthday" type="date" placeholder="" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="党内状态"  prop="type">
                        <el-select v-model="rowdata.type" >
                            <!-- :disabled="isEdit" -->
                            <el-option label="党员" value="党员"></el-option>
                            <el-option label="入党积极分子" value="入党积极分子"></el-option>
                            <el-option label="重点培养对象" value="重点培养对象"></el-option>
                            <el-option label="预备党员" value="预备党员"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="入党时间"  prop="datain" v-if="showdatain">
                        <el-date-picker v-model="rowdata.datain" type="date" placeholder="" value-format="yyyy-MM-dd"  ></el-date-picker>
                        <!-- :disabled="isEdit" -->
                        <el-tooltip class="item" effect="dark" content="转成预备党员的时间" placement="right-start">
                            <i class="el-icon-question" style="margin-left: 20px;"></i>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="转正时间"  prop="zhuanzhentime" v-if="showzhuanzheng==true">
                        <el-date-picker v-model="rowdata.zhuanzhentime" type="date" placeholder="" value-format="yyyy-MM-dd"  ></el-date-picker>
                        <!-- :disabled="isEdit" -->
                        <el-tooltip class="item" effect="dark" content="转成正式党员的时间" placement="right-start">
                            <i class="el-icon-question" style="margin-left: 20px;"></i>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="在职状态"  prop="zztx">
                        <el-select v-model="rowdata.zztx" >
                            <el-option label="在职" value="在职"></el-option>
                            <el-option label="退休" value="退休"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号码"  prop="phone">
                        <el-input v-model="rowdata.phone" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号"  prop="personID">
                        <el-input v-model="rowdata.personID" style="width: 85%;" :disabled="isEdit"></el-input>   
                    </el-form-item>
                    <el-form-item label="文化程度"  prop="wenhuan">
                        <el-input v-model="rowdata.wenhuan" style="width: 85%;"></el-input>
                    </el-form-item>
                    <el-form-item label="民族"  prop="mingz">
                        <el-input v-model="rowdata.mingz" style="width: 85%;"></el-input>
                        
                    </el-form-item>
                    <el-form-item label="行政职务"  prop="xzzhiwu">
                        <el-input v-model="rowdata.xzzhiwu" style="width: 85%;"></el-input>
                    </el-form-item>
                    <el-form-item label="管理权限"  prop="operation">
                        <el-select v-model="rowdata.operation" placeholder="">
                            <el-option v-for="item in operations" :key="item.name" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="党内职务"  prop="zhiwu">
                        <el-select v-model="rowdata.zhiwu"  @change="changezw">
                            <el-option v-for="item in zhiwus" :key="item.name" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <div v-if="zhiwuShow==true">
                        <el-form-item label="职务党委"   prop="banzjianshedwname">
                            <el-select v-model="rowdata.banzjianshedwname" @change="changedw">
                                <el-option v-for="item in alldws" :key="item.name" :label="item.name" :value="item.name"></el-option> 
                            </el-select>
                        </el-form-item>
                        <el-form-item label="职务支部"   v-if="zhiwuShowDZB==true" prop="banzjianshedzbname">
                            <el-select v-model="rowdata.banzjianshedzbname" @change="changedzb">
                                <el-option v-for="item in allzbs" :key="item.name" :label="item.name" :value="item.name"></el-option> 
                            </el-select>
                        </el-form-item>
                    </div>
                    <el-form-item label="个人相片"  >
                        <div style="display: flex;width: 80%;"  prop="img">
                            <div class="showimg" >
                                <img v-bind:src="imgsrcp">
                                <div class="demo-upload-list-cover" >
                                    <Icon type="ios-eye-outline"  title="预览" @click.native="handleView()"></Icon>
                                </div>
                            </div>
                            <el-upload class="mybutton" :action="action" :data="data" :before-upload="beforeupload" :on-success="uploadSuccess" :disabled="disabledUploaded" :show-file-list="false" :with-credentials="true">
                                <el-button size="small" type="primary" title="只能上传jpg/png文件,不应大于2M" :disabled="disabledUploaded">点击上传</el-button>
                            </el-upload>
                            
                        </div>
                    </el-form-item>
                </el-form>
                <el-row style="position: relative;width: 100%;">
                    <el-button style="margin: 0 auto;display: block;"  :disabled="disabled" type="primary" @click="checksubmit('rowdata')">确定并保存<i class="el-icon-upload el-icon--right" ></i></el-button>
                </el-row>
            </div>
        </el-dialog>
        <Modal title="预览图片" v-model="visible" style="z-index:2999;position: absolute;">
            <img :src="imgsrcp" v-if="visible" style="width: 100%">
        </Modal>
    </div>
</template>
<script>
    import {mapActions} from 'vuex';
    export default {
        data() {
            var validphone= (rule, value, callback) => {
                if (value === ''|| typeof value==="undefined") {
                    callback(new Error('不能为空'));
                } 
                else {
                    if(value.length==11){
                        if(!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(value))){ 
                            callback(new Error('号码无效'));
                        }
                        else{
                            callback();
                        }
                    }
                    else{
                        callback(new Error('号码无效'));
                    }
                    
                }
            };
            var validpersonid= (rule, value, callback) => {
                if (value === ''|| typeof value==="undefined") {
                    callback(new Error('不能为空'));
                } 
                else {
                    if(!(/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value))){ 
                        this.personIDOK=false;
                        callback(new Error('身份证号码无效'));
                    }
                    else{
                        this.personIDOK=true;
                        callback();
                    }
                }
            };
            var validImg= (rule, value, callback) => {
                if (value === ''|| typeof value==="undefined") {
                    callback(new Error('不能为空'));
                } 
                else {
                    var ImgObj = new Image();
                    ImgObj.src = value;
                    if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {  
                        callback();
                    } else {  
                        callback(new Error('图片无效'));
                    }  
                }
            }; 
            return { 
                dialogVisible: false, 
                needZk:true,
                rowdata: {
                    truename:'',
                    sex:'',
                    birthday:'',
                    datain:'',
                    type:'',
                    zhuanzhentime:'',
                    zztx:'',
                    phone:'',
                    personID:'',
                    wenhuan:'',
                    mingz:'',
                    xzzhiwu:'',
                    operation:'',
                    zhiwu:'',
                    banzjianshedwname:'',
                    banzjianshedzbname:'',
                    img:'',
                },
                isEdit:false,
                personIDOK:false,
                imgsrcp:'',
                showdatain:false,
                showzhuanzheng:false,
                zhiwuShow:false,//当选择有党内职务时显示 banzjianshedw  banzjianshedzb的选项
                zhiwuShowDZB:true,//当选择有党内职务时显示 如果时局委员会就不显示党支部

                //辅助性
                alldws:[],//党内有职务时选择的委员会
                allzbs:[], //党内有职务时选定委员会时出现的党支部
                zhiwudwid:-2,
                zhiwudzbid:-2,
                operations:[
                    { //管理权限
                        id:0,
                        name:'超级管理员'
                    },{
                        id:1,
                        name:'管理院级委员会'
                    },{
                        id:2,
                        name:'管理支部'
                    },
                    {
                        id:3,
                        name:'无权限'
                    }
                ],
                zhiwus:[
                    {name:'书记'},
                    {name:'副书记'},
                    {name:'组织委员'},
                    {name:'宣传委员'},
                    {name:'委员'},
                    {name:'无'}
                ],
                
                //上传
                data: {},
                action: '',
                disabledUploaded:true,

                //查看人员相片
                visible:false,
                imgsrc:'',
                disabled:false,//uploadToServe 正在添加 保存人员信息
                rules: {
                    truename: [{ required: true, message: '不能为空', trigger: 'change' }],
                    sex: [{ required: true, message: '不能为空', trigger: 'change' }],
                    birthday: [{ required: true, message: '不能为空', trigger: 'change' }],
                    type: [{ required: true, message: '不能为空', trigger: 'change' }],
                    datain: [{ required: true, message: '不能为空', trigger: 'change' }],
                    zztx: [{ required: true, message: '不能为空', trigger: 'change' }],
                    phone: [{ required: true,validator: validphone, trigger: 'change' }],
                    personID: [{ required: true,validator: validpersonid, trigger: 'blur' }],
                    wenhuan: [{ required: true, message: '不能为空', trigger: 'change' }],
                    mingz: [{ required: true, message: '不能为空', trigger: 'change' }],
                    //xzzhiwu: [{ required: true, message: '不能为空', trigger: 'blur' }],//可以不要
                    operation: [{ required: true, message: '不能为空', trigger: 'change' }],
                    zhiwu: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    banzjianshedwname: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    banzjianshedzbname: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    zhuanzhentime: [{ required: true, message: '不能为空', trigger: 'change' }],
                     // { validator: validatePass, trigger: 'blur' }
                },

                

            };
            
        },
       
        mounted() {
            this.action=this.$Common.Config.url;
            this.data={
                type:"uploadPersonimg",
                token:this.$Common.GetStorage('token'),
            }
            this.alldws=[];
            let _this=this; ;        
            this.GetZbById({dwid:-1,dzbid:-1})
            .then(function(data){
                if(data!=false){
                    _this.alldws.push({
                        id:data.PostThis.dwid,
                        name:data.PostThis.alias
                    })
                    for (let index = 0; index < data.childs.length; index++) {
                        const element = data.childs[index];
                        _this.alldws.push({
                            id:element.dwid,
                            name:element.alias
                        })
                    }
                }
                
            })
        },
        components: {},
        watch: {
            "personIDOK":{
                handler(){
                    if(this.personIDOK==true){//只有当身份证OK的时候才能上传图片
                        this.disabledUploaded=false
                    }
                    else{
                        this.disabledUploaded=true;
                    }
                },
                deep:true
            },
            dialogVisible: function (n) {
                if (n == true) {
                    if(this.needZk==true){//只有当身份证OK的时候才能上传图片
                        this.rowdata={
                            truename:'',
                            sex:'',
                            birthday:'',
                            datain:'',
                            type:'',
                            zhuanzhentime:'',
                            zztx:'',
                            phone:'',
                            personID:'',
                            wenhuan:'',
                            mingz:'',
                            xzzhiwu:'',
                            operation:'',
                            zhiwu:'',
                            banzjianshedwname:'',
                            banzjianshedzbname:''
                        };
                        this.personIDOK=false;
                        this.imgsrcp='';
                        this.showzhuanzheng=false;
                        this.zhiwuShow=false;
                        this.zhiwuShowDZB=false;
                        this.zhiwudwid=-2;
                        this.zhiwudzbid=-2;
                        this.disabledUploaded=true;
                        this.visible=false;
                        this.disabled=false;
                    }
                }
            },
            "rowdata.type":{
                handler(n){
                    this.showdatain=true;
                    this.rowdata.datain='';
                    if(this.rowdata.type=='党员' )
                    {
                        this.showzhuanzheng=true;
                    }
                    else if(this.rowdata.type=='预备党员' )
                    {
                        this.showzhuanzheng=false;
                        this.rowdata.zhuanzhentime='';
                    }
                    else
                    {
                        this.showzhuanzheng=false;
                        this.rowdata.zhuanzhentime='';
                        this.showdatain=false;
                        this.rowdata.datain='';
                    }
                }
            },
        },
        methods: {
            ...mapActions(['GetZbById','GetZbByIdstate']),
            handleView() {
                this.visible = true;
            },
            beforeupload(file){
                let name=file.name;
                let names=name.split('.');
                this.data.split={};
                this.data.split.personid=this.rowdata.personID;
                this.data.split.filetype=names[names.length-1];
                this.data.split=JSON.stringify(this.data.split);
            },
            uploadSuccess(response, file, fileList) {
                if(response.Status==true){
                    let dataT=new Date().getTime();
                    this.imgsrcp=response.Message+"?"+dataT;
                    this.rowdata.img =  this.imgsrcp;
                    this.$message("上传成功");
                }
                else if(response.Status==false){
                    this.$message(response.Message);
                }
                else{
                    this.$message(response);
                }
                return;
            },
            changezw(name){
                if(name=='无'){
                    this.zhiwuShow=false;
                }
                else{
                    this.zhiwuShow=true;
                }
                this.zhiwudwid=-2;
                this.zhiwudzbid=-2;
                this.rowdata.banzjianshedzbname='';
                this.rowdata.banzjianshedwname='';
            },
            changedw(name){
                let finddws=this.alldws.filter(function(valuedw){
                    return valuedw.name==name;
                })
                let dwid=-1;
                if(finddws.length>0){
                    dwid=finddws[0].id;
                }
                else{
                    return;
                }
                if(dwid==-1){//如果时局就不再显示党支部了
                    this.zhiwuShowDZB=false;
                    this.zhiwudzbid=-1;
                }
                else{
                    this.zhiwuShowDZB=true;
                }
                this.zhiwudwid=dwid;
                
                // 如果需要下面的党支部 则
                if(this.zhiwuShowDZB==true){
                    this.rowdata.banzjianshedzbname='';//banzjianshedwname
                    this.zhiwudzbid=-2;
                    let _this=this;
                    this.allzbs=[];
                    this.GetZbById({dwid:dwid,dzbid:-1})
                    .then(function(data){
                        _this.allzbs.push({
                            id:data.PostThis.dzbid,
                            name:data.PostThis.alias
                        })
                        for (let index = 0; index < data.childs.length; index++) {
                            const element = data.childs[index];
                            _this.allzbs.push({
                                id:element.dzbid,
                                name:element.alias
                            })
                        }
                    })
                }
                
            },
            changedzb(name){
                let finddzbs=this.allzbs.filter(function(valuedzb){
                    return valuedzb.name==name;
                })
                let dzbid=-2;
                if(finddzbs.length>0){
                    dzbid=finddzbs[0].id;
                }
                this.zhiwudzbid=dzbid;
            },
            CheckStatus(){
                this.changebanzjianshedw(this.rowdata.banzjianshedw);
            },
            checksubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        
                        this.uploadToServe();
                    } 
                    else {
                        this.$message("请填写必要信息");
                        return false;
                    }
                });
            },
            uploadToServe(){
                let _this=this;
                let newPerson={};
                newPerson.truename=this.rowdata.truename;
                newPerson.password=''; //???
                newPerson.sex=this.rowdata.sex;
                newPerson.birthday=this.rowdata.birthday;
                newPerson.datain=this.rowdata.datain;
                newPerson.zhuanzhentime=this.rowdata.zhuanzhentime;
                newPerson.zhiwu=this.rowdata.zhiwu;
                newPerson.zztx=this.rowdata.zztx;
                newPerson.dwid=this.$store.state.Dw_DzbID.dwid;
                newPerson.dzbid=this.$store.state.Dw_DzbID.dzbid;
                newPerson.phone=this.rowdata.phone;
                let operations=this.operations.filter(function(operation){
                    return operation.name==_this.rowdata.operation;
                })
                newPerson.operation=operations[0].id;
                let imgUrl=this.rowdata.img;
                newPerson.img='';
                if(imgUrl){
                    if(imgUrl !=''){
                        let IMGS=imgUrl.split('?')
                        newPerson.img=IMGS[0];
                    }
                }
                
                newPerson.personID=this.rowdata.personID;
                newPerson.type=this.rowdata.type;
                newPerson.wenhuan=this.rowdata.wenhuan;
                newPerson.mingz=this.rowdata.mingz;
                newPerson.xzzhiwu=this.rowdata.xzzhiwu;
                newPerson.banzjianshedw=this.zhiwudwid;
                newPerson.banzjianshedzb=this.zhiwudzbid;
                this.uploadAjax(newPerson);
            },
            uploadAjax(newPerson){
                let _this=this;

                let postdata={
                    split:JSON.stringify(newPerson)
                }
                if(this.isEdit==true){
                    postdata.type='updatePersons';
                }
                else{
                    postdata.type='InsertPersons';
                }
                this.disabled=true;
                this.$Common.AjaxPost(postdata,true)
                .then(function(e){
                    _this.$message("操作成功");
                    _this.disabled=false;
                    _this.dialogVisible=false;
                    _this.$emit('editResult');
                },function(){
                     _this.$message("操作失败");
                    _this.disabled=false;
                })
                .catch(function(reason) {
                    console.log('catch:', reason);
                });
            },
        },

    }
</script>
<style>
</style>